<template lang="pug">
transition(name="move")
  .production-detail-wrapper(v-show="visible")
    .production-scroll-wrapper
      //- cube-scroll通过data参数监听内容是否发生变化，并动态刷新滚动条
      cube-scroll(:data="filterRatings" ref="scrollProduction")
        .head
          img.image(:src="production.image")
          span.back.iconfont.iconarrowLeft(@click="back")
        .detail
          .name {{production.name}}
          .sell
            span.month 月售{{production.sellCount}}份
            span.rating {{production.rating}}%
          .price-button
            span.yuan ￥
            span.now {{production.price}}
            span.old ￥{{production.oldPrice}}
            transition(name="fade")
              span.add-first(v-show="addFirstVisible" @click="addFirst") 加入购物车
            transition(name="fade")
            span.cart-control-container(v-show="!addFirstVisible")
              CartControl(:production="production" @addEvent="onAdd")
        .desciption
          .title 商品介绍
          .info {{production.info}}{{production.info}}
        Split
        .title 商品评价
        .rating-select-container
          RatingSelect( :onlyContent="true"
                        :ratingGroup= [
                                    {
                                      value: 0,
                                      text: "全部"
                                    },
                                    {
                                      value: 1,
                                      text: "推荐"
                                    },
                                    {
                                      value: 2,
                                      text: "吐槽"
                                    }
                                  ],
                        :ratings="production.ratings"
                        :currentGroup=0
                        @sendCurrentGroup="onSelectCurrentGroup"
                        @sendOnlyContent="onSelectOnlyContent")
        .rating-list-container
          ProductionRatingList(:filterRatings="filterRatings")
    .shop-cart-production-container
      ShopCart(:selectedProductions="selectedList" 
                :deliveryPrice="deliveryPrice" 
                :minPrice="minPrice"
                :enableClickTwice="true"
                ref="shopCartProduction")
      
</template>

<script>
import Split from "../split/split"
import CartControl from "../cart-control/cart-control"
import ShopCart from "../shop-cart/shop-cart"
import RatingSelect from "../rating-select/rating-select"
import ProductionRatingList from "../production-rating-list/production-rating-list"
import RatingMixin from "../../static/common/mixins/rating"

export default {

  name: 'production',

  mixins: [RatingMixin],

  props: {
    production: {
      type: Object,
      default() {
        return {}
      }
    },
    selectedList: {
      type: Array,
      default: []
    },
    deliveryPrice: {
      type: Number,
      default: 0
    },
    minPrice: {
      type: Number,
      default: 0
    }
  },

  data() {
    return {
      visible: true,
      ratings: this.production.ratings
    }
  },

  computed: {
    addFirstVisible() {
      return !this.production.count
    }
  },

  methods: {
    back() {
      console.log('back')
      this.hide()
    },

    show() {
      this.visible = true
    },

    hide() {
      this.visible = false
    },

    addFirst() {
      this.$set(this.production, 'count', 1)
    },

    onAdd(el) {
      this.$refs.shopCartProduction.drop(el)
    }

  },

  components: {
    Split,
    CartControl,
    ShopCart,
    RatingSelect,
    ProductionRatingList
  }

}


</script>

<style lang="stylus" scoped>
@import "../../static/common/stylus/variable"

.production-detail-wrapper
  position:fixed
  top:0
  left:0
  bottom:0
  width:100%
  background:$color-white
  &.move-enter-active,&.move-leave-active
    transition:all .4s linear
  &.move-enter,&.move-leave-to
    transform: translate3d(100%, 0, 0)
  .production-scroll-wrapper
    position:absolute
    top:0
    left:0
    bottom 56px
    width:100%
    .head
      position:relative
      width:100%
      height:0
      padding-top:100%
      .image
        position:absolute
        top:0
        left:0
        width:100%
        height:100%
      .back
        position:absolute
        top:0
        left:0
        width: 50px
        height: 50px
        padding-left: 15px
        padding-top: 15px
        color:$color-white
    .detail
      position: relative
      margin-top:18px
      margin-left:18px
      z-index:50
      .name
        line-height: 14px
        margin-bottom: 8px
        font-size: $fontsize-large-xx
        font-weight: 700
        color:$color-dark-grey
      .sell
        margin-top:16px
        color:$color-light-grey
        .rating
          margin-left:12px
      .price-button
        margin-top:9px
        position:relative
        .yuan
          font-size:20px
          font-weight:700
          color:$color-red
          line-height:48px
        .now
          font-size:28px
          font-weight:700
          color:$color-red
          line-height:48px
        .old
          margin-left:16px
          font-size:20px
          font-weight:normal
          color:$color-light-grey
          text-decoration:line-through
          line-height:48px
        .add-first
          position:absolute
          right:0
          top:50%
          margin-top:-12px
          margin-right:18px
          width:100px
          height:28px
          line-height:28px
          font-size:14px
          vertical-align:middle
          color:$color-white
          text-align:center
          border-radius:24px
          background-color:$color-blue
          z-index:100
          &.fade-enter-active,&.fade-leave-active
            transition: all .4s linear
          &.fade-enter,&.fade-leave-to
            opacity: 0
        .cart-control-container
          display:inline-block
          position:absolute
          top:50%
          right:18px
          margin-top:-12px
          z-index:50
          &.fade-enter-active,&.fade-leave-active
            transition: all .4s linear
          &.fade-enter,&.fade-leave-to
            opacity: 0
    .desciption
      margin-top:9px
      margin-left:18px
      margin-right:18px
      margin-bottom:18px
      .title
        line-height: 14px
        margin-bottom: 8px
        font-size: $fontsize-medium
        font-weight: 500
        color:$color-dark-grey
      .info
        margin-top:8px
        width:100%
        color:$color-light-grey
        font-size:$fontsize-small
        font-weight:100
        line-height:24px
        white-space:normal
    .title
      line-height: 18px
      margin-top:18px
      margin-bottom: 8px
      margin-left:18px
      font-size: $fontsize-large-xx
      font-weight: 700
      color:$color-dark-grey
    .rating-select-container
      margin-top:18px
      margin-left:18px
    .rating-list-container
      margin-left:18px
      margin-right:18px
      margin-bottom:50px
  .shop-cart-production-container
    position:fixed
    bottom:0
    left:0
    width:100%
    z-index:100
</style>
